<template>
    <el-form ref="loginForm" :model="loginFormData" status-icon :rules="commonRules" label-width="120px"
        class="demo-loginFormData">
        <el-form-item label="用户名" prop="username" class="username-form-item">
            <el-input v-model="loginFormData.username" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password" class="password-form-item">
            <el-input v-model="loginFormData.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="验证码" prop="captcha" class="captcha-form">
            <div class="captcha-form3">
                <el-input v-model="loginFormData.captcha" @keydown.enter="submitForm(loginForm)" maxlength="5"
                    class="captcha-form1" />
                <div class="captcha-form2" v-loading="loading" @click="getCaptcha" v-html="captcha"></div>
            </div>
        </el-form-item>
        <el-form-item class="buttom-form">
            <el-button type="primary" @click="submitForm(loginForm)" class="button1">登入</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import * as api from "../../api/users"
import { reactive, ref, onMounted } from 'vue'
// 引入校验函数
import { commonRules, useSubmitForm } from "../../composition/login/vaildate"

// 引入loading动画加载框
import { ElLoading } from 'element-plus'
// 引入store
import { useUser } from "../../store/users"
// 引入路由对象
import { useRouter } from "vue-router"
let router = useRouter()//声明使用路由对象
let userStore = useUser() // 声明使用store

//声明应一个响应式属性,控制loading显示和隐藏
let loading = ref(true)

// 表单校验成功之后，回调的方法
let vaildateSucess = () => {
    console.log('校验成功');
    // 发起登入请求

    // 1.登入请求之前要对验证码进行校验
    // toLowerCase转成小写
    verifyCaptchaApi(loginFormData.captcha.toLowerCase())

}
// 表单校验失败之后，回调的方法
let vaildateFailed = () => {
    console.log('校验失败');
}

// 使用SubmitForm
let submitForm = useSubmitForm(vaildateSucess, vaildateFailed)
const loginForm = ref()

// 注入到表单的数据
const loginFormData = reactive({
    username: '',
    password: '',
    captcha: '',
})

// 声明一个展示验证码的变量
let captcha = ref()
// 获取图片验证码
let getCaptcha = async () => {
    loading.value = true//一旦发起请求就要打开loading动画
    let res = await api.getCaptchaApi()
    loading.value = false//关闭加载动画
    if (res.data.state) captcha.value = res.data.img

}
// 校验验证码
// 1.本地的表单校验通过之后
// 2.通过接口校验验证码,一定要配置代理
// 3.声明loadingInstance,用户存储loading动画实例
let loadingInstance = null
let verifyCaptchaApi = async (captcha) => {
    // 发起登入请求的时候就要加载loading加载框
    loadingInstance = ElLoading.service({
        // lock:true,
        text: '正在登入...',
        background: 'rgba(0,0,0,0.4)'
    })
    try {
        // 验证码校验通过，
        // 发起登入请求
        let res = await api.verifyCaptchaApi(captcha)
        login(loginFormData.username, loginFormData.password)
    } catch (e) {
        console.log(e);
        getCaptcha()
        loadingInstance.close()
    }
}

// 用户名，密码登入逻辑
/**
 * 
 * @param {String} username 用户名
 * @param {String} password 密码
 */
let login = async (username, password) => {

    try {
        // 调用登入请求的接口
        let res = await api.loginApi(username, password)
        // console.log(res);

        sessionStorage.setItem('zkm-token', res.data.token);//存储token
        // 存储用户信息
        userStore.$patch(res.data.userInfo)
        // 登入成功需要跳转到主页 
        router.push("/home")
        loadingInstance.close()
    } catch (e) {
        loadingInstance.close()
        console.log(e);
    }
}


// 首次页面加载调用
onMounted(() => {
    getCaptcha()
})
</script>
<style lang="less" scoped>
.username-form-item,
.password-form-item {
    .el-input {
        width: 300px !important;
        height: 45px;
    }
}

.captcha-form {
    .captcha-form3 {
        background-color: white;
        border-radius: 3px 3px 3px 3px;
        display: flex;
        width: 300px;
        height: 45px;

        .captcha-form1 {
            width: 140px !important;

            :deep(.el-input__wrapper) {
                box-shadow: none;
            }

            .captcha-form2 {
                width: 160px !important;
                // height: 40px;
                background-color: white;
                border-radius: 0 3px 3px 0;
            }
        }
    }

}

.button1 {
    width: 300px;
}

.sms {
    a {
        color: white;
    }
}
</style>